<template>
	<view>
		<view class="roads">
			<view class="road" @click="handleNavToDetail" v-for="it in 6">
				<image src="/static/images/road-demo1.png" mode="widthFix"></image>
				<view class="c-content">
					<view class="c-title">无障碍路线图</view>
					<view class="c-desc">点击查看</view>
					<view class="tags">
						<text class="tag">大苏打撒旦</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			handleNavToDetail(){
				uni.navigateTo({
					url:'/pages/roadDetail/roadDetail'
				})
			}
		}
	}
</script>

<style lang="scss">
	.roads {
		padding: 22upx 0;
		box-sizing: border-box;
	
		.road {
			display: flex;
			align-items: center;
			padding: 22upx 30upx;
			box-sizing: border-box;
			border-bottom: 1upx solid $uni-color-bg-s;
	
			image {
				width: 160upx;
			}
	
			.c-content {
				display: flex;
				flex-direction: column;
				width: calc(100% - 120upx);
				margin-left: 20upx;
	
				.c-title {
					font-size: 34upx;
					font-weight: 600;
				}
	
				.c-desc {
					color: #666;
					font-size: 28upx;
					margin: 8upx 0;
					margin-bottom: 16upx;
				}
	
				.tags {
					display: flex;
	
					.tag {
						background-color: $uni-color-bg-s;
						padding: 8upx 16upx;
						font-size: 26upx;
						margin-right: 8upx;
						color: $uni-color-primary;
					}
				}
			}
		}
	}
	
</style>
